<template>
  <div class="app">
    <div class="box top_1">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="9">
          <div class="item">
            <div style="width: 100%; font-size: 20px; padding: 10px">
              <span>今日服务访问情况 </span>
            </div>
            <div id="bing3"></div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="item">
            <div>
              <span style="display: inline-block; font-size: 20px; padding: 10px">服务访问总量 </span>
              <span style="float: right; padding: 10px">
                <el-button @click="mounthfun('7')">近7天</el-button>
                <el-button @click="mounthfun('30')">近30天</el-button> &nbsp;
                <!-- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> -->
                <el-date-picker v-model="value2" type="daterange" @change="mounthfun('111')" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
              </span>
            </div>
            <div class="animeition" v-show="isbool">
              <div class="cont">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>

            <div id="bing4"></div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="item" style="overflow: auto; position: relative">
            <span style="display: inline-block; padding: 10px; font-size: 20px; padding: 10px; width: 100%">服务调用次数排行(次)</span>
            <div style="width: 100%; height: 90%; overflow: auto; display: flex; flex-direction: column">
              <div style="display: flex; width: 100%; padding: 10px; border-bottom: 1px solid #ccc" v-for="(item, index) in arr" :key="index">
                <h6 :style="{ background: item.bgcolor, 'font-size': '20px', color: '#ffffff' }">{{ index + 1 }}</h6>
                <p style="flex: 1; padding: 0px 5px">{{ item.name }}</p>
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { serviceAccessToday, serviceAccessVolume } from '@/api/index/index'
export default {
  props: ['rightcellthreeArr'],
  data() {
    return {
      isbool: true,
      itemObj: {
        echarts1: null,
        echarts2: null,
      },
      xLabel: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      dataValue: ['1450', '1550', '1540', '1430', '1600', '1650', '1530'],
      value2: '',
      arr: [],
      option: {},
      timeObj: {
        startime: '',
        endtime: '',
      },
      obj: {
        timevalue: [],
        value: [],
      },
    }
  },
  watch: {
    value2: {
      handler: function (newval, oldval) {
        if (newval) {
          console.log(newval, '111111111111111')
        }
      },
    },
    rightcellthreeArr: {
      deep: true,
      handler: function (newval, oldval) {
        if (newval) {
          newval.map((v, i) => {
            this.arr.push({
              bgcolor: '',
              name: v.api_name,
              value: v.callCount,
            })
          })

          this.echarts2()
          this.arr.sort((a, b) => b.callCount - a.callCount)
          this.arr.map((v, i) => {
            v.bgcolor = this.colorfilter(i + 1)
          })
        }
      },
    },
  },
  mounted() {
    this.apifun()
    // 获取当前日期
    let currentDate = new Date()

    // 存储最近7天日期的数组
    let recentDays = []

    // 获取当前日期前7天的日期
    for (let i = 0; i < 7; i++) {
      let date = new Date(currentDate)
      date.setDate(currentDate.getDate() - i)
      recentDays.push(date.toISOString().slice(0, 10))
    }
    this.timeObj.startime = recentDays[recentDays.length - 1]
    this.timeObj.endtime = recentDays[0]
    this.api1fun()
  },
  methods: {
    colorfilter(value) {
      switch (value) {
        case 1: {
          return '#FF302C'
        }
        case 2: {
          return '#00BE92'
        }
        case 3: {
          return '#FF8A00'
        }
        default: {
          return '#158BCD'
        }
      }
    },
    apifun() {
      serviceAccessToday().then((res) => {
        this.xLabel = []
        this.dataValue = []
        let list = []
        if (res.data.code == 200) {
          for (const key in res.data.data.serviceAccessToday.serviceAccessToday) {
            list.push({
              key: key,
              value: res.data.data.serviceAccessToday.serviceAccessToday[key],
            })
          }

          list.sort((a, b) => {
            return a.key - b.key
          })
          list.map((v, i) => {
            this.xLabel.push(v.key + ':' + '00' + ':' + '00')
            this.dataValue.push(v.value)
          })
          this.echarts1()
        }
      })
    },
    api1fun() {
      this.isbool = true
      serviceAccessVolume({
        params: {
          startTime: this.timeObj.startime,
          endTime: this.timeObj.endtime,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.isbool = false
          console.log(res.data.data)
          res.data.data.map((v, i) => {
            this.obj.timevalue.push(new Date(v.callerDate).toLocaleDateString())
            this.obj.value.push(v.msg)
          })
          this.echarts2()
        }
      })
    },
    mounthfun(time) {
      this.obj = {
        timevalue: [],
        value: [],
      }
      if (time == '7') {
        // 获取当前日期

        let currentDate = new Date()

        // 存储最近7天日期的数组
        let recentDays = []

        // 获取当前日期前7天的日期
        for (let i = 0; i < 7; i++) {
          let date = new Date(currentDate)
          date.setDate(currentDate.getDate() - i)
          recentDays.push(date.toISOString().slice(0, 10))
        }
        console.log('7 days ago: ', recentDays.length)
        this.timeObj.startime = recentDays[recentDays.length - 1]
        this.timeObj.endtime = recentDays[0]
      } else if (time == '30') {
        // 获取当前日期
        let currentDate = new Date()

        // 存储最近7天日期的数组
        let recentDays = []

        // 获取当前日期前7天的日期
        for (let i = 0; i < 30; i++) {
          let date = new Date(currentDate)
          date.setDate(currentDate.getDate() - i)
          recentDays.push(date.toISOString().slice(0, 10))
        }
        this.timeObj.startime = recentDays[recentDays.length - 1]
        this.timeObj.endtime = recentDays[0]
      } else if (time == '111') {
        console.log(this.value2)
        if (this.value2 !== null) {
          this.timeObj.startime = this.$moment(new Date(this.value2[0])).format('YYYY-MM-DD')
          this.timeObj.endtime = this.$moment(new Date(this.value2[this.value2.length - 1])).format('YYYY-MM-DD')
        } else {
          // 获取当前日期

          let currentDate = new Date()

          // 存储最近7天日期的数组
          let recentDays = []

          // 获取当前日期前7天的日期
          for (let i = 0; i < 7; i++) {
            let date = new Date(currentDate)
            date.setDate(currentDate.getDate() - i)
            recentDays.push(date.toISOString().slice(0, 10))
          }
          console.log('7 days ago: ', recentDays.length)
          this.timeObj.startime = recentDays[recentDays.length - 1]
          this.timeObj.endtime = recentDays[0]
        }
      }
      this.api1fun()
    },
    echarts1() {
      this.itemObj.echarts1 = this.$echarts.init(document.getElementById('bing3'))
      //做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: 'rgb(126,199,255)',
            },
          },
          //       formatter: (p) => {
          //         let dom = `<div style="width: 100px;height: 15px;;color:#fff;position: relative;">
          //         <div>
          //             <span style="font-size:16px;color:#000000;padding:0px 4px;line-height:15px">${p[0] ? p[0].name + ':' + p[0].data : ''}</span>
          //         </div>
          // </div>`
          //         return dom
          //       },
        },

        grid: {
          top: '15%',
          left: '15%',
          right: '10%',
          bottom: '20%', //
          // containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: 'rgb(41,188,245)',
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: '#78bdf5',
                padding: 16,
                fontSize: 14,
              },
              formatter: function (data) {
                return data
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#233653',
              },
            },
            axisTick: {
              show: false,
            },
            data: this.xLabel,
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgb(41,188,245)',
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#233653',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#78bdf5',
                padding: 16,
              },
              formatter: function (value, index) {
                // value大于1000时除以1000并拼接k，小于1000按原格式显示
                if (value >= 100) {
                  value = value / 100 + '00'
                } else if (value < 100) {
                  value
                }
                return value
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '',
            type: 'line',
            // symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            // showAllSymbol: false,
            // symbolSize:8,
            lineStyle: {
              normal: {
                width: 4,
                color: 'rgb(42,191,250)', // 线条颜色
              },
            },
            itemStyle: {
              color: 'rgb(42,191,250)',
            },
            areaStyle: {
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(42,191,250,.4)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(242,191,250, 0)',
                    },
                  ],
                  false
                ),
              },
            },
            data: this.dataValue,
          },
        ],
      }

      this.itemObj.echarts1.setOption(option)
      window.addEventListener('resize', this.handleResize)
    },
    echarts2() {
      this.itemObj.echarts2 = this.$echarts.init(document.getElementById('bing4'))

      var option = {
        grid: {
          top: '15%',
          left: '15%',
          right: '10%',
          bottom: '25%', //
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.obj.timevalue,
        },
        yAxis: {
          type: 'value',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        series: [
          {
            data: this.obj.value,
            type: 'bar',
          },
        ],
      }

      this.itemObj.echarts2.setOption(option)
      window.addEventListener('resize', this.handleResize)
    },
    handleResize() {
      this.itemObj.echarts1.resize()
      this.itemObj.echarts2.resize()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
}
</script>
<style lang="scss" scoped>
.el-range-editor--medium.el-input__inner {
  height: 36px;
  width: 17vw !important;
}
.el-row {
  width: 100%;
}

.box {
  border-radius: 5px;
}
.el-col-9 {
  width: 40% !important;
}
.top_1 {
  width: 100%;
  height: 50vh;
  margin-top: 20px;
  .el-row {
    display: flex;
    justify-content: space-between;

    .item {
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 21px;
      position: relative;
      #bing3 {
        width: 100%;
        height: 90%;
      }
      #bing4 {
        width: 100%;
        height: 90%;
      }
      div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        h6 {
          width: 2vw;
          height: 40px;
          text-align: center;
          line-height: 40px;
          margin: 0px !important;
        }
      }
    }
  }
}
.animeition {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(225, 225, 225, 0.5);
  border-radius: 21px;
  top: 0;
  left: 0;
  z-index: 1000;
}
.cont {
  margin: 50px auto;
  text-align: center;
}
.cont > div {
  /*设置小圆圈的样式*/
  width: 15px;
  height: 15px;
  float: left;
  margin: 0px 10px;
  background: #dd0000;
  border-radius: 100%;
  animation: anim 1s infinite normal ease;
}
.cont > :nth-child(2n) {
  /*设置奇数个小圆圈的动画延迟*/
  animation-delay: 0.5s;
}
::v-deep(.el-date-editor .el-range-separator) {
  width: 24% !important;
}
@keyframes anim {
  /*定义动画*/
  0% {
    transform: scale(0.4);
  }
  25% {
    transform: translateY(30px);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
    transform: scale(0.75);
  }
}
</style>
